<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="layui-form-item" style="margin-top: 10px; margin-left:10px">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">用户名:</label>
				<div class="layui-input-inline" style="width:100px;">
					<input type="text" id="txtUserName" name="txtUserName" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width:100px;"> <input type="text" name="begin" id="begin" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width:100px;">
					<input type="text" name="end" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">是否锁定:</label>
				<div class="layui-input-inline" style="width:100px;">
					<select id="cc" name="dept">
						<option value="">请选择</option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
				<label class="layui-form-mid">排序:</label>
				<div class="layui-input-inline" style="width:100px;">
					<select id="ord" name="orderBy">
						<option value="">请选择</option>
						<option value="CreateTime">创建时间</option>
						<option value="LastLoginTime">最后登录时间</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width:100px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</form>
		</div>
		<!-- hide隐藏 -->
		<table class="layui-hide" id="userTable" lay-filter="test"></table>

		<!-- 设置css样式默认为隐藏 -->
		<div id="yh_edit" style="display:none;margin-top: 20px;">
			<form class="layui-form" lay-filter="updateUser" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="LoginName" name="LoginName" class="layui-input" readonly="true">
					</div>

				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="ProtectEMail" name="ProtectEMail" required="" lay-verify="email" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">手机号:</label>
					<div class="layui-input-inline" style="width:350px;">
						<input type="text" id="ProtectMTel" name="ProtectMTel" required="" lay-verify="required|phone" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align:center;">
					<button class="layui-btn" lay-filter="userEditBtu" lay-submit="">
                        	修改
                    </button>
				</div>
			</form>
		</div>
		<div id="yh_role" style="display:none">
			<div id="role_transfer" class="demo-transfer"></div>
		</div>
	</body>
	<script type="text/javascript">
		layui.use(['table', 'layer', 'transfer'], function() {
			var table = layui.table; //获取layui的table表格组件, 赋值给table变量
			var layer = layui.layer; //获取layui的layer弹出层组件, 赋值给layer变量
			var $ = layui.$; //获得jQuery对象
			var userData; //用户数据
			var transfer = layui.transfer;
			//table.render表格渲染
			table.render({ //render渲染
				elem: '#userTable', //选择要渲染的表格
				toolbar: '#topToolbar',
				height: 500, //表格高度
				method: 'post', //发送请求的方式  !!!!!
				url: globalData.server + 'GetUsersLayUI', //发送请求的地址
				page: true, //开启分页,在开启分页条之后, 会自动发送limit和page参数
				where: { //where代表条件
					token: globalData.myToken
				},
				cols: [
					[ //表头
						{
							field: 'LoginName',
							title: '用户名',
							width: 100,
							sort: true,
							fixed: 'left'
						}, {
							field: 'IsLockout',
							title: '是否锁定',
							width: 100
						}, {
							field: 'LastLoginTime',
							title: '最后登录时间',
							width: 150,
							sort: true
						}, {
							field: 'CreateTime',
							title: '创建时间',
							width: 120
						}, {
							field: 'PsdWrongTime',
							title: '秘密错误次数',
							width: 177
						}, {
							field: 'LockTime',
							title: '用户锁定时间',
							width: 150,
							sort: true
						}, {
							field: 'ProtectEMail',
							title: '邮箱',
							width: 80,
							sort: true
						}, {
							title: '操作',
							toolbar: "#rightToolbar", //通过id绑定工具条
							width: 200
						}
					]
				],
				done: function(res) { //done代表发送请求成功之后的回调函数，res是服务器返回的数据
					userData = res.data; //获得存储用户数据的数组
				}
			});
			//table.on 绑定，给lay-filter的值为test的表格绑定toolbar（工具条）事件
			table.on("toolbar(test)", function(obj) { //obj代表点击的按钮对象
				switch(obj.event) { //event代表事件（获得按钮的lay-event的值）
					case "patch":
						var userNames = [];
						for(var i = 0; i < userData.length; i++) {
							userNames += userData[i].LoginName + " ";
						}
						layer.alert(userNames);
						break;
					case "createUser":
						layer.alert("您点击的是创建用户按钮");
						break;
				}
			});

			var windowIndex;
			//table.on 绑定，给lay-filter的值为test的表格绑定tool（工具）事件
			table.on("tool(test)", function(obj) {
				switch(obj.event) {
					case "chuangJian":
						$.post(globalData.server + "GetRolesAll", {
							token: globalData.myToken
						}, function(res) {
							var all = res.map(function(item) {
								return {
									"value": item.Id,
									"title": item.Name
								}

							});
							var right = [];
							$.post(globalData.server + "GetRolesByUserIdLayUI", {
								uId: obj.data.Id,
								token: globalData.myToken
							}, function(result) {
								if(result.count > 0) {
									for(var i = 0; i < result.data.length; i++) {
										right.push(result.data[i].Id);
									}
								}
								transfer.render({
									elem:"#role_transfer",
									data: all,
									value: right,
									title:["创建角色","已有角色"],
									onchange:function(data,index){
										console.log(data);
										console.log(index);
										if (index ==0) {
											for (var i=0;i<data.length;i++) {
												$.post(globalData.server+"AddUserToRole",{
													uId:obj.data.Id,
													rId:data[i].value,
													token:globalData.myToken
												},function(res){
													
												},"json");
											}
										} else{
											for (var i=0;i<data.length;i++) {
												$.post(globalData.server+"RemoveUserFromRole",{
													uId:obj.data.Id,
													rId:data[i].value,
													token:globalData.myToken
												},function(res){
													
												},"json");
											}
										}
									}
								});
							}, "json");

						}, "json");
						layer.open({
							type: 1,
							content:$("#yh_role"),
							title: "您正在给[" + obj.data.LoginName + "]设置角色",
							area: ["500px", "500px"]
						});
						break;
					case "edit":
						windowIndex = layer.open({ //打开新窗口会获得该窗口的下标
							type: 1,
							content: $("#yh_edit"), //代表新打开弹框的内容
							title: '您正在修改"' + obj.data.LoginName + '"的信息',
							success: function() { //当窗口弹出时触发匿名函数
								$("#LoginName").val(obj.data.LoginName); //数据回显
								$("#ProtectEMail").val(obj.data.ProtectEMail);
								$("#ProtectMTel").val(obj.data.ProtectMTel);
							}
						});
						break;
					case "del":
						layer.confirm("您确定要删除吗？", {
							icon: 3,
							title: "提示"
						}, function(index) {
							console.log(obj);
							var userId = obj.data.Id; //获取点击行中用户的Id

							$.post(globalData.server + "DeleteUser", {
								uid: userId,
								token: globalData.myToken
							}, function(res) {
								if(res.success) {
									layer.alert("删除成功");
								} else {
									layer.alert("删除失败");
								}
							}, "json");
						}, function(index) {
							layer.close(index);
						});
						break;
				}
			});

			var shuJu = {
				shuaXin: function() {
					table.reload("userTable", {
						where: {
							orderBy: $("#ord").val(),
							userName: $("#txtUserName").val(),
							beginDate: $("#begin").val(),
							endDate: $("#end").val(),
							isLock: $("#cc").val(),
							token: globalData.myToken
						}
					});
				}
			}
			$("#search").click(function() {
				shuJu.shuaXin(); //调用shuJu对象的shuaXin方法
			});

			$("#btnEditUser").click(function() {
				var str = $("#fmEditUser").serialize() + "&token=" + globalData.myToken;
				//发送请求
				$.post(globalData.server + "#UpdateUser", str, function(res) {
					if(res.success) {
						layer.msg("修改成功");
						table.reload("userTable"); //表格刷新
						layer.close(windowIndex); //layer。close()；小括号中应该填写弹出窗口的下标
					} else {
						layer.alert("修改失败");
					}
				}, "json");
			});
		});
	</script>
	<script type="text/html" id="topToolbar">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="patch">批量</button>
			<button class="layui-btn layui-btn-sm" lay-event="createUser">创建用户</button>
		</div>
	</script>
	<script type="text/html" id="rightToolbar">
		<button class="layui-btn layui-btn-xs" lay-event="chuangJian">创建角色</button>
		<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
		<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
	</script>

</html>